<template>
  <view class="pay-list" v-if="cardList && shenheStatus == 0">
    <!-- 微信 -->
    <view class="item" v-if="hasShow('wechat')">
      <view class="item-title flex-x-sb flex-y-center">
        <view class="left">{{ $t("shop.wx") }}</view>
        <view
          class="right"
          @click="clickManage('wechat')"
          v-if="cardData('wechat')"
          >{{ $t("mdAdmin.manage") }}</view
        >
      </view>
      <view class="item-content">
        <view
          v-if="!cardData('wechat')"
          @click="clickCard('wechat')"
          class="null-box flex-x-center flex-y-center"
        >
          <text
            class="icon-add-select iconfont"
            style="font-size: 40rpx"
          ></text>
          <text>{{ $t("mdAdmin.addWechat") }}</text>
        </view>

        <view v-else class="bind flex-y-center" style="background: #2fc445">
          <view class="icon-box flex-y-center flex-x-center">
            <text
              class="iconfont icon-wechat"
              style="color: #2fc445; font-size: 40rpx"
            ></text>
          </view>

          <view class="bind-info">
            <view class="flex-x-sb flex-y-center">
              <view>{{ $t("shop.wx") }}</view>
              <view class="flex1">{{ cardData("wechat").account }}</view>
            </view>
            <view class="flex-y-center flex-x-sb">
              <view>{{ $t("mdAdmin.transfer") }}</view>
              <view>{{ cardData("wechat").name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 支付宝 -->
    <view class="item" v-if="hasShow('alipay')">
      <view class="item-title flex-x-sb flex-y-center">
        <view class="left">{{ $t("shop.alipay") }}</view>
        <view
          class="right"
          @click="clickManage('alipay')"
          v-if="cardData('alipay')"
          >{{ $t("mdAdmin.manage") }}</view
        >
      </view>
      <view class="item-content">
        <view
          @click="clickCard('alipay')"
          v-if="!cardData('alipay')"
          class="null-box flex-x-center flex-y-center"
        >
          <text
            class="icon-add-select iconfont"
            style="font-size: 40rpx"
          ></text>
          <text>{{ $t("mdAdmin.addAli") }}</text>
        </view>

        <view v-else class="bind flex-y-center" style="background: #2777fe">
          <view class="icon-box flex-y-center flex-x-center">
            <text class="iconfont icon-zhifubao1" style="color: #2777fe"></text>
          </view>
          <view class="bind-info">
            <view class="flex-x-sb flex-y-center">
              <view>{{ $t("shop.alipay") }}</view>
              <view class="flex1">{{ cardData("alipay").account }}</view>
            </view>
            <view class="flex-y-center flex-x-sb">
              <view>{{ $t("mdAdmin.transfer") }}</view>
              <view>{{ cardData("alipay").name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 银行卡 -->
    <view class="item" v-if="hasShow('bank_card')">
      <view class="item-title flex-x-sb flex-y-center">
        <view class="left">{{ $t("shop.card") }}</view>
        <view
          class="right"
          @click="clickManage('bank_card')"
          v-show="cardData('bank_card')"
          >{{ $t("mdAdmin.manage") }}</view
        >
      </view>
      <view class="item-content">
        <view
          @click="clickCard('bank_card')"
          v-if="!cardData('bank_card')"
          class="null-box flex-x-center flex-y-center"
        >
          <text
            class="icon-add-select iconfont"
            style="font-size: 40rpx"
          ></text>
          <text>{{ $t("mdAdmin.addCard") }}</text>
        </view>

        <view v-else class="bind flex-y-center" style="background: #3fbafe">
          <view class="icon-box flex-y-center flex-x-center">
            <text
              class="iconfont icon-yinhangka1"
              style="color: #3fbafe"
            ></text>
          </view>
          <view class="bind-info">
            <view class="flex-x-sb flex-y-center">
              <view>{{ $t("shop.card") }}</view>
              <view class="flex1">{{ cardData("bank_card").account }}</view>
            </view>
            <view class="flex-y-center flex-x-sb">
              <view>{{ $t("mdAdmin.transfer") }}</view>
              <view>{{ cardData("bank_card").name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 余额 -->
    <!-- <view class="item">
      <view class="item-title flex-x-sb flex-y-center">
        <view class="left">微信零钱</view>
        <view class="right">管理</view>
      </view>
      <view class="item-content">
        <view v-if="false" class="null-box flex-x-center flex-y-center">
          <text
            class="icon-add-select iconfont"
            style="font-size: 40rpx"
          ></text>
          <text>添加微信零钱</text>
        </view>

        <view v-else class="bind flex-y-center" style="background: #fbc210">
          <view class="icon-box flex-y-center flex-x-center">
            <text
              class="iconfont icon-consumption-fill"
              style="color: #fbc210"
            ></text>
          </view>
          <view class="bind-info">
            <view class="flex-x-sb flex-y-center">
              <view>微信</view>
              <view>152****0088</view>
            </view>
            <view class="flex-y-center flex-x-sb">
              <view>可转账/查询账单</view>
              <view>刘*乐</view>
            </view>
          </view>
        </view>
      </view>
    </view> -->

    <u-popup
      v-model="showPopup"
      mode="bottom"
      safe-area-inset-bottom
      :mask-close-able="false"
    >
      <view @click="cancelBind" class="popup-del flex-y-center flex-x-center">{{
        $t("mdAdmin.remove")
      }}</view>
      <view
        @click="this.showPopup = false"
        class="popup-cancel flex-y-center flex-x-center"
        >{{ $t("person.cancle") }}</view
      >
    </u-popup>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      cardList: "",
      showPopup: false,
      select: "",
      is_share_recharge: 0,
      is_rider: 0,
      is_team_grades: 0
    };
  },
  onLoad(t) {
    if (t.is_share_recharge) this.is_share_recharge = t.is_share_recharge;
    if (t.is_team_grades) this.is_team_grades = t.is_team_grades;

    if (t.is_rider) this.is_rider = t.is_rider;
  },

  methods: {
    clickCard(type) {
      switch (type) {
        // 微信
        case "wechat":
          this.$utils.toUrl("/user/share/add-card?type=wechat", "navigate");
          break;
        // 支付宝
        case "alipay":
          this.$utils.toUrl("/user/share/add-card?type=alipay", "navigate");
          break;
        // 银行卡
        case "bank_card":
          this.$utils.toUrl("/user/share/add-card?type=bank_card", "navigate");
          break;
        default:
          break;
      }
    },
    // 获取卡包列表
    async getCardList() {
      const res = await this.$allrequest.share.getWithdraw({
        is_share_recharge: this.is_share_recharge,
        is_team_grades: this.is_team_grades,
        is_rider: this.is_rider
      });
      if (res.code != 0)
        return this.$utils.toast(res.msg || this.$t("user.err"));
      this.cardList = res.data.list;
    },
    // 点击管理
    clickManage(type) {
      this.showPopup = true;
      this.select = type;
    },
    // 删除卡片
    async cancelBind() {
      const res = await this.$allrequest.share.delWithdraw({
        type: this.select
      });
      this.$utils.toast(res.msg || this.$t("user.err"));
      if (res.code != 0) return;
      this.showPopup = false;
      this.getCardList();
    }
  },
  onShow() {
    this.getCardList();
  },
  computed: {
    hasShow() {
      return (type) => {
        let i = this.cardList.find((item) => item.type == type);

        if (i && i.is_show) return true;
        return false;
      };
    },

    cardData() {
      return (type) => {
        let i = this.cardList.findIndex((item) => item.type == type);

        if (i == -1 || !this.cardList[i].is_bind) return false;
        return this.cardList[i];
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.pay-list {
  color: #262626;
  padding: 0 36rpx;
  /deep/.u-drawer-bottom {
    background-color: initial;
  }
}
.item {
  .item-title {
    padding: 40rpx 0 30rpx;
    .left {
      font-size: 30rpx;
      font-weight: 600;
    }
    .right {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
  .item-content {
    .null-box {
      width: 678rpx;
      height: 88rpx;
      background: #ffffff;
      border: 2rpx dashed #f1f1f1;
      opacity: 1;
      border-radius: 0rpx;
      color: #8c8c8c;
    }

    .bind {
      padding: 0 30rpx;
      width: 678rpx;
      height: 160rpx;
      background: #2fc445;
      opacity: 1;
      border-radius: 20rpx;
      .icon-box {
        width: 80rpx;
        height: 80rpx;
        background: #ffffff;
        opacity: 1;
        border-radius: 120rpx;
        .iconfont {
          font-size: 58rpx;
        }
      }
    }

    .bind-info {
      margin-left: 18rpx;
      flex: 1;
      width: 0;
      color: #fff;
      > view:nth-child(1) {
        font-size: 30rpx;
        font-weight: 600;
      }
      > view:nth-child(2) {
        margin-top: 5rpx;
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}

.popup-del,
.popup-cancel {
  margin: 0 auto 16rpx;
  width: 720rpx;
  height: 111rpx;
  background: #ffffff;
  // opacity: 0.8;
  border-radius: 26rpx;
  font-size: 38rpx;
  color: #287aff;
}

.flex1 {
  flex: 1;
  width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
